<script lang="ts" setup>
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import type { IAddressRuleGroup } from './address-mode/types'
import type { DnsAddressPoolListItem } from '@/apis/model/dns'
import { Message } from '@arco-design/web-vue'
import { v4 as uuidV4 } from 'uuid'
import {
  addDnsAuthorityGtmAddressPoolApi,
  getDnsAuthorityGtmAddressPoolApi,
  updateDnsAuthorityGtmAddressPoolApi,
} from '@/apis/modules/dns'
import AddressMode from './address-mode'

interface IProps {
  record?: DnsAddressPoolListItem
}
interface IEmits {
  (e: 'update:visible', value: boolean): void
  (e: 'reload', flag: boolean): void
}
const props = defineProps<IProps>()
const emits = defineEmits<IEmits>()
const visible = defineModel<boolean>('visible', { required: true })
const formRef = ref<FormInstance>()
const addressRef = ref()
const formState = reactive({
  name: '',
})
const addressGroups = ref<IAddressRuleGroup[]>([
  {
    uuid: uuidV4(),
    addresses: [
      {
        uuid: uuidV4(),
        ip: '',
        status: 1,
      },
    ],
  },
])
const title = computed(() => (props.record?.id ? '编辑地址池' : '新建地址池'))
const rules: Record<string, FieldRule> = {
  name: {
    required: true,
    validator(value, callback) {
      if (!value) {
        return callback('地址池名称不能为空')
      }
      callback()
    },
  },
}
const loading = ref(false)
async function handleSubmit() {
  const error = await formRef.value?.validate()
  const error1 = await addressRef.value?.validate()
  if (error || !error1)
    return false
  const data = {
    ...formState,
    id: props.record?.id,
    addresses: addressGroups.value[0].addresses,
  }
  loading.value = true
  const apiPath = props.record?.id
    ? updateDnsAuthorityGtmAddressPoolApi
    : addDnsAuthorityGtmAddressPoolApi
  return apiPath({ ...data })
    .then(() => {
      Message.success('操作成功')
    })
    .finally(() => (loading.value = false))
}
async function getDetail() {
  loading.value = true
  await getDnsAuthorityGtmAddressPoolApi({ id: props.record?.id })
    .then((res) => {
      formState.name = res.name
      addressGroups.value[0].addresses = res.addresses
    })
    .finally(() => (loading.value = false))
}
function handleOpen() {
  if (props.record?.id)
    getDetail()
}
function handleClose() {
  emits('update:visible', false)
  emits('reload', !!props.record?.id)
  formRef.value?.resetFields()
  addressRef.value?.reset()
}
</script>

<template>
  <a-drawer
    v-model:visible="visible"
    :title="title"
    :width="480"
    ok-text="保存"
    :ok-loading="loading"
    :mask-closable="false"
    :on-before-ok="handleSubmit"
    @before-open="handleOpen"
    @before-close="handleClose"
  >
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
    >
      <a-form-item
        label="地址池名称"
        field="name"
        asterisk-position="end"
      >
        <a-input
          v-model="formState.name"
          :max-length="32"
          show-word-limit
          placeholder="请输入地址池名称"
        />
      </a-form-item>
      <a-form-item
        label="地址"
        asterisk-position="end"
        required
      >
        <address-mode
          ref="addressRef"
          v-model="addressGroups"
          class="w-full"
        />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style lang="less" scoped></style>
